<script lang="ts" setup>
import { ElMessageBox, ElNotification } from "element-plus";
import {
  saveOrUpdateTemplateTypeApi,
  delTemplateTypeApi,
  authInsApi,
} from "@/api/activity";
import { activityType } from "@/config/dictionary";

const router = useRouter(),
  store = useStore(),
  internalInstance = getCurrentInstance();
const tableForm = ref<any>({
    name: "",
    queryInsIds: [],
  }),
  form = ref({}),
  dialogTitle = ref(""),
  dialogVisible = ref(false),
  submitLoading = ref(false);
const tableRef = ref(),
  editFormRef = ref();

const filters = internalInstance?.appContext.config.globalProperties.$filters;

const rules = {
  name: [
    { required: true, message: "类型名称不能为空", trigger: "blur" },
    {
      min: 2,
      max: 20,
      message: "类型名称请限制在2至20个字符以内",
      trigger: "blur",
    },
  ],
};

const addType = () => {
  if (editFormRef.value) editFormRef.value.resetFields();
  form.value = {};
  dialogTitle.value = "新增模板类型";
  dialogVisible.value = true;
};

const editType = (row: any) => {
  form.value = {
    ...row,
  };
  dialogTitle.value = `编辑模板类型`;
  dialogVisible.value = true;
};

const handleDelete = ({ id, name }: any) => {
  ElMessageBox.confirm(`确认删除该类型吗？`, "删除提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const rs = await delTemplateTypeApi({ id });
    if (rs.code == 200) {
      ElNotification.success({
        message: "删除成功",
      });
      search();
    }
  });
};

const search = async () => {
  tableRef.value.search();
};

const submit = () => {
  editFormRef.value.validate(async (valid: any) => {
    if (valid) {
      submitLoading.value = true;
      const rs = await saveOrUpdateTemplateTypeApi({
        ...form.value,
      });
      if (rs.code == 200) {
        ElNotification.success({
          message: "保存成功",
        });
        dialogVisible.value = false;
        search(true);
      }
      submitLoading.value = false;
    } else {
    }
  });
};

// 监听机构
const insId = computed(() => {
  return store.state.insId.insId;
});
watch(
  () => insId,
  () => {
    search();
  },
  {
    deep: true,
  }
);
onMounted(() => {});
</script>
<script lang="ts">
export default {
  name: "ActivityTemplateType",
};
</script>
<template>
  <div>
    <MainContent title="模板类型管理">
      <template #search-bar>
        <SearchBar inline :block="true">
          <template #normal>
            <!--            <ins-cascader-filter-->
            <!--              @change="(queryInsIds) => (tableForm.queryInsIds = queryInsIds)"-->
            <!--            ></ins-cascader-filter>-->
            <el-form-item label="类型名称">
              <el-input
                v-model="tableForm.name"
                clearable
                placeholder="请输入活动名称"
              ></el-input>
            </el-form-item>
          </template>
          <template #toolbar>
            <el-form-item>
              <el-button
                type="primary"
                icon="plus"
                @click="addType"
                v-has="['2031']"
                v-if="adminType != 0"
                >新增类型</el-button
              >
            </el-form-item>
          </template>
        </SearchBar>
      </template>
      <LayoutTable
        ref="tableRef"
        url="merchant/custom/activityTemplate/pageOfTemplateType"
        :param="tableForm"
      >
        <el-table-column
          prop="id"
          align="center"
          label="类型ID"
          min-width="80"
        />
        <el-table-column
          prop="insName"
          align="center"
          label="所属机构"
          min-width="100"
        />
        <el-table-column
          prop="name"
          align="center"
          label="类型名称"
          min-width="180"
        />
        <el-table-column align="center" label="创建时间" min-width="180">
          <template #default="scope">{{
            filters.dateFormat(scope.row.createTime)
          }}</template>
        </el-table-column>
        <el-table-column align="center" label="更新时间" min-width="180">
          <template #default="scope">{{
            filters.dateFormat(scope.row.updateTime)
          }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          min-width="240"
          fixed="right"
          v-has="['2032', '2033']"
        >
          <template #default="scope">
            <el-button
              type="primary"
              link
              size="small"
              v-has="['2032']"
              @click="editType(scope.row)"
              style="margin-left: 0"
              >编辑</el-button
            >
            <el-button
              type="primary"
              link
              size="small"
              @click="handleDelete(scope.row)"
              v-has="['2033']"
              style="margin-left: 0"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </LayoutTable>
    </MainContent>
    <Dialog v-model="dialogVisible" :title="dialogTitle" :width="500">
      <el-form
        :model="form"
        ref="editFormRef"
        :rules="rules"
        label-width="auto"
      >
        <el-form-item label="类型名称:" prop="name">
          <el-input
            v-model.trim="form.name"
            placeholder="请输入类型名称"
            maxlength="20"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submit" :loading="submitLoading"
          >保存</el-button
        >
      </template>
    </Dialog>
  </div>
</template>
<style lang="scss" scoped>
.qrcode-container {
  display: flex;
  align-items: center;
  justify-content: center;

  .tips {
    color: #666666;
    margin-left: 20px;
    font-size: 14px;

    div {
      & + div {
        margin-top: 10px;
      }
    }

    a {
      color: var(--el-color-primary);
    }
  }
}

.collpase-title {
  font-size: 16px;
  margin-bottom: 10px;

  span {
    font-size: 13px;
    color: #909399;
    margin-left: 10px;
    font-weight: normal;
  }
}
</style>
